import facecat from "facecat"
import facecat_ws from "facecat_ws"

let gPaint = new facecat.FCPaint();
/*
* 点击方法
* view:视图
* firstTouch:是否第一次触摸
* firstPoint:第一次触摸的坐标
* secondTouch:是否第二次触摸
* secondPoint:第二次触摸的坐标
* clicks:点击次数
*/
gPaint.onClick = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
    facecat.onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
    if (view.viewName == "Button") {
		alert(view.text);
	} else if (view.viewName == "Button2") {
		alert(view.text);
	} else if (view.viewName == "Button3") {
		alert(view.text);
	} else if (view.viewName == "Button4") {
		alert(view.text);
	}
};

let that = null;

// index.js
// 获取应用实例
const app = getApp()
Page({
    data: {
        canvasWidth:0,
        canvasHeight:0,
        facecatStyle:"",
        facecatContent:"",
        facecatFocus:false
      },
      bindInputChange: function(e) {  
        if(gPaint.editingTextBox){
            gPaint.editingTextBox.text = e.detail.value;
            facecat.invalidateView(gPaint.editingTextBox);
            gPaint.editingTextBox = null;
            gPaint.app.setData({
                facecatStyle: "position:absolute;left:0px;top:0px;width:0px;height:0px;display:none;", 
                facecatFocus:false,
                facecatContent:""
             })
        }
      },
  touchStartCanvas: function (e) {
    facecat_ws.handleTouchStart(gPaint, e, null);
  },touchMoveCanvas: function (e) {
    facecat_ws.handleTouchMove(gPaint, e, null);
  },touchEndCanvas: function (e) {
    facecat_ws.handleTouchEnd(gPaint, e, null, null);
  },
  onLoad() {
      that = this;
    wx.createSelectorQuery().select('#myCanvas').fields({ node: true, size: true }).exec((cres) => {       
        wx.getSystemInfo({
            success: function(res) {
                that.setData({
                    canvasWidth: res.windowWidth,  
                    canvasHeight: res.windowHeight
                 })
                cres[0].width = res.windowWidth;
                cres[0].height = res.windowHeight;
            }
        });   
        facecat_ws.scaleCanvas(gPaint, cres);
        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        gPaint.onPaint = function (view, paint, clipRect) {
            if (view.viewName == "Button4") {
                paint.fillRect("rgb(255,0,0)", 0, 0, view.size.cx, view.size.cy);
            } else {
                facecat.onPaintDefault(view, paint, clipRect);
            }
        };     
        let xml = `<?xml version="1.0" encoding="utf-8"?>
        <html xmlns="facecat">
          <head>
          </head>
          <body>
            <div dock="fill" type="tab" selectedindex="0">
              <div name="TabPage" text="可视化生成" type="tabpage">
                <input type="button" name="Button" text="取消" location="35,50" size="100,20" backcolor="rgb(170,178,189)" cornerradius="4" textcolor="rgb(255,255,255)" />
                <input type="button" name="Button2" text="确认" location="32,92" size="130,38" font="Default,16.0" backcolor="rgb(59,174,218)" bordercolor="rgb(255,0,0)" textcolor="rgb(255,255,255)" />
                <input type="button" name="Button3" text="查询" location="33,155" size="100,42" textcolor="rgb(0,0,5)" backcolor="rgb(140,192,81)" font="Default,14.0" cornerradius="10" />
              </div>
              <div name="TabPage2" text="代码创建" type="tabpage" />
              <div name="TabPage3" text="自定义重绘" type="tabpage">
                <input type="custom" cid="mybutton" name="Button4" text="删除" location="74,84" size="100,40" />
              </div>
            </div>
          </body>
        </html>
        `;
	    facecat_ws.renderFaceCatWeChat(gPaint, xml, that);
        //获取第二页
        let tabPage = facecat.findViewByName("TabPage2", gPaint.views);
        let button = new facecat.FCButton();
        button.location = new facecat.FCPoint(100, 100);
        button.size = new facecat.FCSize(100, 20);
        button.backColor = "rgb(255,255,255)";
        button.textColor = "rgb(0,0,0)";
        button.borderColor = "rgb(150,150,150)";
        facecat.addViewToParent(button, tabPage);
        button.text = "确定";		
    })
  }
})
